<template>
  <div class="bar-box">
    <div class="first-line">{{ title }}</div>
    <div class="gray-box">
      <slot></slot>
    </div>
  </div>
</template>

<script setup lang="ts">
// 直接在defineProps中定义props的默认值
defineProps({
  // 标题
  title: {
    type: [Number, String],
    default: ""
  }
});
</script>

<style lang="scss" scoped>
.bar-box {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  .first-line {
    position: absolute; /* 绝对定位，相对于其最近的相对定位的祖先元素 */
    top: -10px; /* 定位到父容器的中间 */
    left: 0; /* 水平居中 */
    align-items: center;
    width: 50%; /* 与父容器相同宽度 */
    font-size: 25px; /* 根据需要设置字体大小 */
    font-weight: bold; /* 根据需要设置字体加粗 */
    color: #ffffff; /* 根据需要设置文字颜色 */
    text-align: center;
    background-color: rgb(45 44 44 / 100%);
    box-shadow: 0 0 8px 5px rgb(22 67 249 / 60%);
    transform: translateX(50%); /* 向上移动自身高度的50%，使其居中 */
  }
  .gray-box {
    width: 100%;
    height: 100%;
    background-color: rgb(45 44 44 / 70%); /* 半透明灰色背景 */
  }
}
</style>
